@extends('layouts.console_header')

@section('title', '个人地推详情')

@section('resources')
    @parent
	<style>
		input[type ='button']{width: 100px;height: 40px;border-radius: 5px;font-size: 18px;}
		.user_details_title{overflow: hidden;width: 300px;height: 30px;margin: 20px auto;}
		.user_details_title span{float: left;width: 98px;border: 1px solid #ccc;text-align: center;line-height: 28px;cursor: pointer;}
		.user_details_list table{border-collapse:collapse;display: none;}
		.user_details_list table thead tr{border: 1px solid #ccc;}
		.user_details_list table td{text-align: center;padding: 5px 0;}
		.order_details_list table{border-collapse:collapse;}
		.order_details_list table thead tr{border: 1px solid #ccc;}
		.order_details_list table td{text-align: center;padding: 5px 0;}
		#last_page{background-color: #9955c6;float: left;display: none;}
		#next_page{background-color: #9955c6;float: right;display: none;}
		#order_last_page{background-color: #9955c6;float: left;display: none;}
		#order_next_page{background-color: #9955c6;float: right;display: none;}
		table tbody{border-top: 1px solid #000;border-bottom: 1px solid #000;font-size: 14px;}
		table tbody tr:nth-child(2n+1){border-bottom: 1px solid #ddd;background-color: #f9f9f9;}
		table tbody tr:nth-child(2n){border-bottom: 1px solid #ddd;}
		table tbody tr td{padding: 10px 0;}
		table tbody tr td:nth-child(1){background-color: #f1f1f1;}
		.order_details{position: fixed;top: 230px;left: 50%;width: 600px;margin-left: -300px;border: 1px solid #808080;background-color: #fff;padding: 0 10px 20px;display: none;z-index: 1001;}
		.order_details .title img{width: 30px;position: absolute;top: 10px;right: 10px;}
		.order_details .title{width: 550px;text-align: center;font-size: 30px;color: #808080;line-height: 50px;}
	</style>
@endsection

@section('content')
<section class="user_list">
	<div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
		<p class="fz_14 account_title fl" style="border: none;">
		    <span style="color: #7f7f7f;"><a href="/console/index">首页</a>>地推管理><a href="/console/salesman/user/list">个人地推</a>>
		    <a href="/console/salesman/user/details?cityid={{$cityid}}&salesmanid={{$salesmanid}}">详情</a>></span>
		    <span class="co_violet">查看地推效果</span>
        </p>
		<a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
	</div>
	
	<div class="user_details">
		<p class="user_details_title">
			<span class="register" style="border: 1px solid #9955c6;color: #9955c6;">注册用户</span>
			<span class="order">地推订单</span>
			<span class="recharge">地推充值</span>
		</p>
		<div class="user_details_list">
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
		        <thead>
		            <tr>
		                <td>序号</td>
		                <td>注册时间</td>
		                <td>手机号</td>
		                <td>订单数</td>
		                <td>地推订单数</td>
		                <td>地推订单实付</td>
		                <td>地推订单</td>
		            </tr>
		        </thead>
		        <tbody id="tbody_register">
		            
		        </tbody>
		    </table>
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
		        <thead>
		            <tr>
		                <td>序号</td>
		                <td>订单时间</td>
		                <td>订单号</td>
		                <td>手机号</td>
		                <td>消费门店</td>
		                <td>商家代码</td>
		                <td>地推订单实付</td>
		            </tr>
		        </thead>
		        <tbody id="tbody_order">

		        </tbody>
		    </table>
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
		        <thead>
		            <tr>
		                <td>序号</td>
		                <td>充值时间</td>
		                <td>订单号</td>
		                <td>手机号</td>
		                <td>充值金额</td>
		            </tr>
		        </thead>
		        <tbody id="tbody_recharge">

		        </tbody>
		    </table>
		</div>
		<p style="margin-top: 20px;">
			<button id="last_page">上一页</button>
			<button id="next_page">下一页</button>
		</p>
	</div>
	<div class="order_details">
		<p class="title">
			<span>地推订单</span>
			<img src="{{env('IMAGE_DOMAIN')}}images/close_p.png" alt="">
		</p>
		<p id="order_name" style="text-align: center;color: #808080;margin: 10px 0;"></p>
		<div class="order_details_list">
			<table class="consume" cellspacing='0' cellpadding='0' width="100%">
				<thead>
					<tr>
						<td>订单时间</td>
						<td>订单号</td>
						<td>地推订单实付</td>
					</tr>
				</thead>
				<tbody id="tbody_orderdetail">

				</tbody>
			</table>
		</div>
		<p style="margin-top: 20px;">
			<button id="order_last_page">上一页</button>
			<button id="order_next_page">下一页</button>
		</p>
	</div>
</section>
@endsection

@section('scriptResources')
    @parent
    <script>
    var salesman_id = '{{$salesmanid}}';
    var salesmanset_id = '{{$selectsalesmansetid}}';
    var cityid = '{{$cityid}}';
    var type = 'register';
    var page = 1;
    var orderpage = 1;
    var length = 20;
    var orderuserid;
    $('.user_details_list table').eq(0).show();
    //获取用户详细信息
    function getUserMessage(type,page){
    	$.ajax({
    		url: '/console/salesman/user/registerororder/get',
    		type: 'get',
    		data: {
                salesmanid:salesman_id,
                salesmansetid:salesmanset_id,
    			page:page,
    			length:length,
                cityid:cityid,
    			type: type
    		},
    		dataType: 'json',
    		success:function(data){
    			if(data.status == 'success'){
    				var data = data.data;
    				var lists = data.lists;
    				if((lists.length + (length * (page-1))) < data.total){
						$("#next_page").show();
					}else{
						$("#next_page").hide();
					};
					if(page <=1){
						$("#last_page").hide();
					}else{
						$("#last_page").show();
					};
					if(type == 'register'){
						$("#tbody_register").empty();
						if(lists == ''){
							$("#tbody_register").html("<tr><td colspan='7' style='font-size: 18px;color: #333;'>~注册无数据~</td></tr>");return;
						}else{
							for (var i = 0; i < lists.length; i++) {
								var tr = $('<tr>'+
							                '<td>'+(i+(page-1)*length+1)+'</td>'+
							                '<td>'+lists[i].created_at+'</td>'+
							                '<td>'+lists[i].registermobile+'</td>'+
							                '<td>'+lists[i].ordernum+'</td>'+
							                '<td>'+lists[i].ordervalidnum+'</td>'+
							                '<td>'+lists[i].orderamount+'</td>'+
							                '<td><a href="#" onclick="getOrderMessage('+ lists[i].userid +','+ orderpage +')">查看</a></td>'+
							            '</tr>');
								$("#tbody_register").append(tr);
							};
						}
					}else if(type == 'order'){
						$("#tbody_order").empty();
						if(lists == ''){
							$("#tbody_order").html("<tr><td colspan='7' style='font-size: 18px;color: #333;'>~订单无数据~</td></tr>");return;
						}else{
							for (var i = 0; i < lists.length; i++) {
								var tr = $('<tr>'+
							                '<td>'+(i+(page-1)*length+1)+'</td>'+
							                '<td>'+lists[i].created_at+'</td>'+
							                '<td>'+lists[i].ordernumber+'</td>'+
							                '<td>'+lists[i].registermobile+'</td>'+
							                '<td>'+lists[i].shopname+'</td>'+
							                '<td>'+lists[i].shopcode+'</td>'+
							                '<td>'+lists[i].orderamount+'</td>'+
							            '</tr>');
								$("#tbody_order").append(tr);
							};
						}
					}else if(type == 'recharge'){
						$("#tbody_recharge").empty();
						if(lists == ''){
							$("#tbody_recharge").html("<tr><td colspan='6' style='font-size: 18px;color: #333;'>~充值无数据~</td></tr>");return;
						}else{
							for (var i = 0; i < lists.length; i++) {
								var tr = $('<tr>'+
							                '<td>'+(i+(page-1)*length+1)+'</td>'+
							                '<td>'+lists[i].created_at+'</td>'+
							                '<td>'+lists[i].rechargenumber+'</td>'+
							                '<td>'+lists[i].registermobile+'</td>'+
							                '<td>'+lists[i].rechargeamount+'</td>'+
							            '</tr>');
								$("#tbody_recharge").append(tr);
							};
						}
					}
    			}else{
    				alert(data.message)
    			}
    		}
    	})
    }
    getUserMessage(type,page)
	//用户信息切换
    $('.user_details_title span').click(function(){
    	var i = $(this).index();
    	$('.user_details_title span').eq(i).css({"border": "1px solid #9955c6","color": "#9955c6"}).siblings().css({"border": "1px solid #ccc","color": "#000"});
    	$('.user_details_list table').eq(i).show().siblings().hide();
    	type = $('.user_details_title span').eq(i).attr("class");
    	page = 1;
    	getUserMessage(type,page)
    });
    //下一页
    $("#next_page").click(function(){
    	page++;
    	getUserMessage(type,page)
    })
    //上一页
    $("#last_page").click(function(){
    	page--;
    	getUserMessage(type,page)
    });
    //获取地推订单信息
    function getOrderMessage(userid,orderpage){
        $('.order_details').show();
        $(".public_prompt_mark").show();
        $(".public_prompt_mark").height($(window).height());
        orderuserid = userid;
        $.ajax({
            url: '/console/salesman/person/order/lists',
            type: 'get',
            data: {
                userid:userid,
                page:orderpage,
                length:10,
                cityid:cityid,
                type: "usersalesman"
            },
            dataType: 'json',
            success:function(data) {
                if (data.status == 'success') {
                    var data = data.data;
                    var lists = data.lists;
					$("#order_name").html(data.name + ' (' + data.mobile + ') ' + data.count + '笔地推订单')
                    $("#tbody_orderdetail").empty();
                    if((lists.length + (length * (orderpage-1))) < data.count){
                        $("#order_next_page").show();
                    }else{
                        $("#order_next_page").hide();
                    };
                    if(orderpage <=1){
                        $("#order_last_page").hide();
                    }else{
                        $("#order_last_page").show();
                    };
					if(lists == ''){
						$("#tbody_orderdetail").html("<tr><td colspan='3' style='font-size: 18px;color: #333;'>~无地推订单~</td></tr>");return;
					}else{
						for (var i = 0; i < lists.length; i++) {
							var tr = $('<tr>'+
									'<td>'+lists[i].created_at+'</td>'+
									'<td>'+lists[i].ordernumber+'</td>'+
									'<td>'+lists[i].orderamount+'</td>'+
								'</tr>');
							$("#tbody_orderdetail").append(tr);
						};
					}
                } else {
                    alert(data.message)
                }
            }
        })
    }
    //地推订单下一页
    $("#order_next_page").click(function(){
        orderpage++;
        getOrderMessage(orderuserid,orderpage)
    })
    //地推订单上一页
    $("#order_last_page").click(function(){
        orderpage--;
        getOrderMessage(orderuserid,orderpage)
    });
    $(".order_details .title img").on("click",function () {
        orderpage = 1;
        $("#tbody_orderdetail").empty();
        $("#order_next_page").hide();
        $(".public_prompt_mark").hide();
        $("#order_last_page").hide();
        $('.order_details').hide();
    })
    </script>
@endsection